<template>
  <div>
    <input
      type="checkbox"
      :checked="item.status === FINISHED"
      @click="setStatus(item.id)"
    />
    <span :class="item.status === FINISHED ? 'line-throught' : ''">{{
      item.content
    }}</span>
    <button @click="removeTodo(item.id)">删除</button>
    <button
      v-if="item.status !== FINISHED"
      @click="setDoing(item.id)"
      :class="item.status === DOING ? 'doing' : 'willdo'"
    >
      {{ item.status === DOING ? "正在做..." : "马上做" }}
    </button>
  </div>
</template>

<script lang="ts">
import { ITodo, TODO_STATUS } from "@/typings";
import { defineComponent, PropType } from "vue";

interface IStatusState {
  DOING: TODO_STATUS;
  WILLDO: TODO_STATUS;
  FINISHED: TODO_STATUS;
}

export default defineComponent({
  name: "TodoItem",
  props: {
    item: Object as PropType<ITodo>,
  },
  setup(props, { emit }) {
    const statusState: IStatusState = {
      DOING: TODO_STATUS.DOING,
      WILLDO: TODO_STATUS.WILLDO,
      FINISHED: TODO_STATUS.FINISHED,
    };

    //功能1：checkbox - 完成或未完成的选择
    const setStatus = (id: number): void => {
      emit("setStatus", id);
    };
    //功能2：button - 删除该项的功能
    const removeTodo = (id: number): void => {
      emit("removeTodo", id);
    };
    //功能3：button - 正在做的确认按钮
    const setDoing = (id: number): void => {
      emit("setDoing", id);
    };

    return {
      ...statusState,
      setStatus,
      removeTodo,
      setDoing,
    };
  },
});
</script>

<style scoped>
.line-throught {
  text-decoration: line-through;
}

.doing {
  background-color: #ededed;
  color: #999;
}

.willdo {
  background-color: orange;
  color: #fff;
}
</style>